import React, {useEffect, useState} from "react";
import {RoleKeyValueProp, UserEditDrawerProp, UserEditFormProp} from "@/pages/authority/modules";
import {Button, Drawer, Form, Input, Space, Spin, Radio, Checkbox, Row, Col, message, Tree} from "antd";
import {getUserDetail, updateUser} from "@/api/user";
import {allRole} from "@/api/role";

const UserEditDrawer: React.FC<UserEditDrawerProp> = ({visible, userId, close}) => {

    const [spinning, setSpinning] = useState<boolean>(false);
    const [roles, setRoles] = useState<RoleKeyValueProp[]>([]);
    const [form] = Form.useForm<UserEditFormProp>();

    const closeDrawer = () => {

    }

    const submitForm = () => {
        form.validateFields().then(async value => {
            console.log("value => ", value);
            const result = await updateUser(value);
            message.success(result);
            close(true);
        })
    }

    const initLoad = async (userId: number) => {
        const roles = await allRole()
        const detail = await getUserDetail(userId);
        setRoles(roles);
        form.setFieldsValue({...detail})
    }

    useEffect( () => {
        if (visible && userId) {
            initLoad(userId)
        }
        return () => {
            form.resetFields();
            setRoles([]);
        }
    }, [visible])

    return <Drawer
        width={500}
        title="用户修改"
        placement="right"
        onClose={() => close(false)}
        open={visible}
        extra={
            <Space>
                <Button type="primary" danger onClick={()=> close(false)}>取消</Button>
                <Button type="primary" onClick={() => submitForm()}>保存</Button>
            </Space>
        }
    >
        <Spin tip="加载中......" spinning={spinning}>
            <Form labelCol={{ span: 4 }}
                  wrapperCol={{ span: 20 }}
                  form={form}
                  layout="horizontal"
                  name="form_in_modal"
            >
                <Form.Item name="id" label="用户ID" style={{display: 'none'}}><Input /></Form.Item>
                <Form.Item name="name" label="账号" rules={[{ required: true, message: '请输入账号' }]}>
                    <Input placeholder="请输入账号" />
                </Form.Item>
                <Form.Item name="phone" label="手机">
                    <Input placeholder="请输入手机号" />
                </Form.Item>
                <Form.Item name="email" label="邮箱" rules={[{ required: true, message: '请输入邮箱' }]}>
                    <Input placeholder="请输入邮箱" />
                </Form.Item>
                <Form.Item name="sex" label="性别">
                    <Radio.Group>
                        <Radio key={1} value={1}> 男 </Radio>
                        <Radio key={0} value={0}> 女 </Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item name="desc" label="备注">
                    <Input.TextArea rows={3} placeholder="请输入用户备注" />
                </Form.Item>
                <Form.Item name="userStatus" label="状态">
                    <Radio.Group>
                        <Radio key={0} value={0}> 不可用 </Radio>
                        <Radio key={1} value={1}> 可用 </Radio>
                        <Radio key={2} value={2}> 禁用 </Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item name="roleIds" label="角色">
                    <Checkbox.Group style={{ width: '100%' }}>
                        <Row>
                            {roles.map(item => <Col span={8}>
                                <Checkbox
                                    key={item.value}
                                    value={item.value}
                                    style={{ lineHeight: '32px' }}>{item.label}</Checkbox>
                            </Col>)}
                        </Row>
                    </Checkbox.Group>
                </Form.Item>
            </Form>
        </Spin>
    </Drawer>
}

export default UserEditDrawer;